<template>
    <main-layout>
        <nav-layout ></nav-layout>
        <div class="content">
              <van-sidebar v-model="activeKey">
                  <van-sidebar-item  @click="show(item.id)" v-for="item in categoryList" :key="item.id" :title="item.name" />
              </van-sidebar>
              <div class="right">
                  <sub-category :list="subList"/>
              </div>
        </div>
     </main-layout>

</template>

<script>
// 引入subcategory
import subCategory from './subCategory.vue'
import { getSubCategory } from '@/api/categoryApi'
import { tabApi } from '@/api/homeApi'
export default {
  components: {
    subCategory
  },
  data () {
    return {
      activeKey: 0,
      categoryList: [],
      subList: []
    }
  },
  async created () {
    console.log(this.$route, '----------route')
    const categoryResult = await tabApi({ id: 'su' })
    console.log(categoryResult, '-----categoryResult')
    if (categoryResult.data.code === 200) {
      this.categoryList = categoryResult.data.data.list.slice(1)
      console.log(this.categoryList, '---this.categoryList')
      // 默认页面跳转为第一个
      this.show(this.categoryList[0].id)
    }
  },
  methods: {
    async show (id) {
      const subResult = await getSubCategory(id)
      if (subResult.data.code === 200) {
        this.subList = subResult.data.data.categories
        console.log(this.subList, '----------this.subList')
      }
    }
  }
}

</script>

<style lang="less" scoped>
.content{
  width: 100%;
    display: flex;
    >.right{
      flex: 1;
      height: 100px;
    }
    >van-grid{
      // width: 100%;
      // flex: 1;
    }

  }
</style>
